<!--页面组件-->
<template>
  <div>
    <div class="tempxyz tableHeight">
      <CCard>
        <CCardHeader>
          <!-- class=strongstyle -->
          <strong class="title">任务列表</strong>
        </CCardHeader>
        <CCardBody class="card-body">
          <div class="cardstyle">
            <div class="rowstyle">
              <div class="secondPart" style="margin-bottom: 10px">
                <div class="NewBiludTask">
                  <CButton
                    color="info"
                    class="addBtn"
                    style="background-color: #5290e8"
                    @click="addEmergencyTask"
                  >
                    <CIcon name="cil-plus" />新建任务
                  </CButton>
                </div>
              </div>
              <div class="threePart">
                <div class="myColtemp layout" style>
                  <p class="labelName" style="width: 60px">任务名称</p>
                  <Input
                    :title="groupName"
                    v-model="groupName"
                    placeholder="请输入任务名称搜索..."
                    class="pickstyle"
                    maxlength="50"
                    @keyup.enter="hello"
                    id="inputenter"
                  />
                </div>
                <div class="startStutes layout">
                  <label class="labelName">开始日期</label>
                  <DatePicker
                    type="date"
                    placeholder="请选择开始日期"
                    v-model="startDate"
                    class="pickstyle"
                    @on-change="onStartTimeChange"
                    :options="startTimeOption"
                    :editable="false"
                  ></DatePicker>
                </div>
                <div class="endDateBtn layout">
                  <label class="labelName" style="width: 60px">结束日期</label>
                  <DatePicker
                    type="date"
                    placeholder="请选择结束日期"
                    v-model="endDate"
                    class="pickstyle"
                    @on-change="onEndTimeChange"
                    :options="endTimeOption"
                    :editable="false"
                  ></DatePicker>
                </div>

                <div class="searchRight">
                  <CButton
                    color="info"
                    @click="getTaskTableData('look')"
                    class="myCol1 listbtn"
                    style="background-color: #5290e8"
                  >
                    <CIcon name="cil-magnifying-glass" />&nbsp;搜索
                  </CButton>
                  <CButton
                    color="info"
                    @click="clearmess"
                    class="myCol1 clean"
                    style="background-color: #5290e8"
                  >
                    <CIcon name="cil-x-circle" />&nbsp; 重置
                  </CButton>
                </div>
              </div>
            </div>
          </div>
          <CDataTable
            class="tablePosition"
            :items="data"
            :fields="fields"
            hover
            border
          >
            <template #status="{ item }">
              <td>
                <p v-if="item.status === 'running'">运行中</p>
                <p v-if="item.status === 'complete'">完成</p>
                <p v-if="item.status === 'pause'">暂停</p>
              </td>
            </template>
            <template #show_details="{ item }">
              <td>
                <CButton
                  v-c-tooltip="'详情'"
                  title="详情"
                  variant="outline"
                  class="btnStyle"
                  @click="getTaskDetails(item)"
                >
                  <CIcon class="colortempstyle" name="cil-line-spacing" />
                </CButton>
                <CButton
                  v-if="item.status === 'complete'"
                  v-c-tooltip="'启动'"
                  title="启动"
                  variant="outline"
                  class="btnStyle"
                  @click="statusBtn(item, 'running')"
                >
                  <CIcon name="cil-power-standby" />
                </CButton>
                <CButton
                  v-if="item.status === 'pause'"
                  v-c-tooltip="'启动'"
                  title="启动"
                  variant="outline"
                  class="btnStyle"
                  @click="statusBtn(item, 'running')"
                >
                  <CIcon name="cil-power-standby" />
                </CButton>
                <CButton
                  v-if="item.status === 'running'"
                  v-c-tooltip="'暂停'"
                  title="暂停"
                  variant="outline"
                  class="btnStyle"
                  @click="statusBtn(item, 'pause')"
                >
                  <CIcon name="cil-media-pause" />
                </CButton>
                <!-- :disabled="item.status == 'running' ? true : false"f -->
                <CButton
                  v-c-tooltip="'终止'"
                  title="终止"
                  v-if="item.status == 'running' || item.status == 'pause'"
                  variant="outline"
                  class="btnStyle"
                  @click="stop(item)"
                >
                  <CIcon class="colortempstyle" name="cil-media-stop" />
                </CButton>
                <!-- <CButton
                  v-c-tooltip="'完成'"
                  title="完成"
                  v-if="item.status == 'complete'"
                  variant="outline"
                  class="btnStyle"
                  @click="() => {}"
                >
                  <CIcon class="notcolortempstyle" name="cil-media-stop" />
                </CButton> -->

                <CButton
                  v-c-tooltip="'删除'"
                  title="删除"
                  variant="outline"
                  @click="del(item)"
                  class="btnStyle"
                  data-permission="Btn_AllTask_Del"
                >
                  <img
                    src="@/assets/icons/delete.svg"
                    class="featuresstyle"
                    style="margin-top: -1px"
                    alt
                  />
                </CButton>
              </td>
            </template>
            <template #other="{ item }">
              <td>
                <CButton
                  v-c-tooltip="'发布设置'"
                  title="发布设置"
                  variant="outline"
                  @click="publishSetting(item)"
                  class="btnStyle"
                  data-permission="Btn_AllTask_Del"
                >
                  <img
                    src="@/assets/icons/edit.svg"
                    class="featuresstyle"
                    style="margin-top: -1px"
                    alt
                  />
                </CButton>
                <!-- // 任务状态 running-运行中 pause-暂停 complete-完成 -->

                <i-switch
                  v-model="item.publishStatus"
                  size="large"
                  v-if="item.status === 'running'"
                  @on-change="publishBtn($event, item)"
                >
                  <span slot="open">发布</span>
                  <span slot="close">取消</span>
                </i-switch>

                <!-- <Switch v-model="switch1" @on-change="publishBtn($event,item)">sfdsfdsf</Switch> -->
                <!-- 
                <CButton
                  v-if="item.status==='running'||publishStatus"
                  v-c-tooltip="'发布'"
                  title="发布"
                  variant="outline"
                  class="btnStyle"
                  @click="publishBtn(item)"
                >
                     
                     <i class="fa fa-eye"></i>
                     
                </CButton>
                  <CButton
                  v-if="item.status==='running'||!publishStatus"
                  v-c-tooltip="'取消发布'"
                  title="取消"
                  variant="outline"
                  class="btnStyle"
                  @click="unpublishBtn(item)"
                >
                  
                    <i class="fa fa-eye-slash"></i>
                </CButton> -->
              </td>
            </template>
          </CDataTable>
        </CCardBody>
        <CCardFooter class="page-link">
          <CRow>
            <CCol class="footerPage" style>
              <span class="pageContent">
                每页
                <CSelect
                  @change="getVendorId($event)"
                  :options="[10, 15, 20, 25]"
                  v-model="pageSize"
                  class="selectStyle"
                  style
                />
                条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                  this.allNum
                }}条记录)
              </span>
              <CPagination
                :activePage.sync="currentPage"
                :pages="total"
                align="end"
                v-if="total != 0"
              />
            </CCol>
          </CRow>
        </CCardFooter>
      </CCard>
    </div>
    <CModal
      :show.sync="delShow"
      :closeOnBackdrop="false"
      title="删除主任务"
      centered
    >
      <template #header class="taskLookHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <p class="delKuangShow">删除主任务</p>
      </template>
      <div class="delKuangBody">
        <p>删除主任务时与主任务相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="delAnniu">取消</CButton>
        <CButton @click="delOk" color="info">确定</CButton>
      </template>
    </CModal>
    <!-- 新建应急任务 -->
    <CModal :show.sync="addTask" title="应急监测任务创建" centered>
      <CRow>
        <CCol md="12">
          <CForm>
            <label class="labelName">时间：</label>
            <DatePicker
              type="date"
              placeholder="请选择开始日期"
              v-model="EmergencyTaskParam.createTime"
              class="pickstyle"
              @on-change="onStartTimeChange"
              :options="startTimeOption"
              :editable="false"
            ></DatePicker>
            <label
              class="labelName"
              style="position: relative; top: 44px; left: -72%"
              >地点：</label
            >
            <Cascader
              :data="options"
              v-model="EmergencyTaskParam.address"
              trigger="click"
              style="
                width: 100px;
                display: inline-block;
                margin-left: 67px;
                margin-bottom: 10px;
                margin-top: 10px;
              "
              @on-change="handleChangeProvince($event)"
            ></Cascader>
            <label
              class="labelName"
              style="position: relative; left: -35%; top: 45px"
              >灾种：</label
            >
            <CSelect
              horizontal
              :options="DisasterTypeShowList"
              :value.sync="currentDisasterType"
              class="selectSuffix"
              @change="selectDisasterType($event)"
              style="position: relative; left: 14.3%; width: 84%"
            ></CSelect>
            <label class="labelName">事件名称：</label>
            <CInput
              v-model="EmergencyTaskParam.EmergencyTaskName"
              placeholder="请输入名称"
              style="position: relative; left: 67px; width: 61%; top: -26px"
            />

            <!-- <label class="labelName" style="position: relative;bottom: 22px;">产品类型：</label> 
            <CInputCheckbox
              label="灾害范围"
              type="radio"
              :checked.sync="DisasterAreaRadio"
              value="灾害范围"
              style="position: relative;left: 15%;top: -42px;"
            />
            <CInputCheckbox
              label="农作物损毁"
              type="radio"
              :checked.sync="CropDamageRadio"
              value="农作物损毁"
              style="position: relative;left: 50%;top: -62px;"
            />
            <CInputCheckbox
              label="房屋损毁"
              type="radio"
              :checked.sync="HouseDamageRadio"
              value="房屋损毁"
              style="position: relative;left: 15%;top: -42px;"
            />
            <CInputCheckbox
              label="道路损坏"
              type="radio"
              :checked.sync="RoadDamageRadio"
              value="道路损坏"
              style="position: relative;left: 50%;top: -62px;"
            />
             -->
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addTaskCancel" color="info" class="delAnniu"
          >取消</CButton
        >
        <CButton @click="addTaskOk" color="info">保存</CButton>
      </template>
    </CModal>

    <!-- 发布 -->
    <Modal
      v-model="publishShow"
      draggable
      scrollable
      title="发布设置"
      :width="600"
    >
      <h5>{{ typeText }}名称筛选条件:</h5>
      <div class="pubulishSetting">
        <div class="queryBox">
          <div style="margin-bottom: 15px">
            <span style="font-size: 16px">{{ typeText }}类型：</span>
            <Select
              transfer
              placeholder="请选择类型"
              v-model="eventType"
              @on-change="getEventName('eventType')"
              style="width: 450px; margin-left: 10px"
            >
              <Option
                v-for="item in disasterList"
                :value="item.value"
                :key="item.label"
              >
                {{ item.label }}
              </Option>
            </Select>
          </div>
          <div style="margin-bottom: 15px">
            <span style="font-size: 16px">{{ typeText }}时间：</span>
            <DatePicker
              type="date"
              style="width: 450px; margin-left: 10px"
              @on-change="getEventName('eventDate')"
              placeholder="开始时间"
              format="yyyy-MM-dd"
              v-model="eventDate"
            ></DatePicker>
          </div>
          <div style="margin-bottom: 15px">
            <span style="font-size: 16px">{{ typeText }}标题：</span>
            <Input
              @on-change="getEventName('eventTitle')"
              v-model="eventTitle"
              placeholder="事件标题"
              style="width: 450px; margin-left: 10px"
            ></Input>
          </div>
          <div style="margin-bottom: 15px">
            <span style="font-size: 16px">{{ typeText }}地区：</span>
            <el-cascader
              v-model="eventArea"
              size="medium"
              ref="cascader"
              @change="getEventName('eventArea')"
              clearable
              placeholder="请选择地区"
              :props="propsParams"
              style="width: 450px; margin-left: 10px"
            >
              <template slot-scope="{ node, data }">
                <!--点击文本后选中整个节点-->
                <div
                  @click="
                    $event.srcElement.parentNode.previousElementSibling.click()
                  "
                >
                  {{ data.label }}
                </div>
              </template>
            </el-cascader>
          </div>
        </div>

        <div style="margin-bottom: 15px">
          <span style="font-size: 16px">{{ typeText }}名称：</span>
          <Select
            placeholder="请选择名称.."
            transfer
            clearable
            v-model="eventId"
            @on-change="getEventId"
            style="width: 450px; margin-left: 10px"
          >
            <Option
              v-for="item in eventNameList"
              :value="item.value"
              :key="item.label"
            >
              {{ item.label }}
            </Option>
          </Select>
        </div>
      </div>

      <template #footer>
        <CButton @click="createEventBtn" color="info" class="system-btn-style"
          >创建对应事件</CButton
        >
        <CButton @click="savePublish" color="info" class="system-btn-style"
          >保存</CButton
        >
        <CButton @click="cancelSave" color="light">取消</CButton>
      </template>
    </Modal>
  </div>
</template>
<script>
import QualityReport from "../qualityCheck/qualityReport";
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:60px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "任务名称",
    key: "groupTaskName",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "创建时间",
    key: "createTime",
    _style: "width:200px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "景数(处理/未处理)",
    key: "imageNumber",
    _style: "width:150px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "完成时间",
    key: "endTime",
    _style: "width:200px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },

  {
    label: "区域",
    key: "regionName",
    _style: "width:150px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "灾害种类",
    key: "disasterName",
    _style: "width:150px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "任务状态",
    key: "status",
    slot: "status",
    _style: "width:150px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "操作",
    key: "show_details",
    _style: "width:180px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "自动发布",
    key: "other",
    _style: "width:180px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
export default {
  name: "taskLook",
  computed: {
    getColumnlist() {
      return [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        { key: "number", title: "序号", align: "center" },
        { key: "groupTaskName", title: "任务名称", align: "center" },
        { key: "createTime", title: "创建时间", align: "center" },
        { key: "imageNumber", title: "景数(处理/未处理)", align: "center" },
        { key: "endTime", title: "完成时间", align: "center" },
        { key: "regionName", title: "区域", align: "center" },
        { key: "disasterName", title: "灾害种类", align: "center" },
        {
          title: "操作",
          width: "150px",
          slot: "action",
          align: "center",
        },
      ];
    },
  },
  data() {
    return {
      publishStatus: false, //表格中发布按钮和取消发布按钮显隐控制
      currentItem: {},
      //发布模块数据
      publishShow: false,
      getPublishId: [],
      eventType: "FOREST_STEPPE_FIRE",
      typeText: "事件",
      eventDate: "",
      eventTitle: "",
      eventArea: "",
      propsParams: {
        lazy: true, //可以理解为开关，什么时候结束
        lazyLoad: this.lazyLoad,
        checkStrictly: true,
        multiple: false,
      },
      eventTypeResult: [],
      imageNameList: [],
      eventId: "",
      disasterList: [
        { label: "地震", value: "EARTHQUAKE" },
        { label: "地质灾害", value: "LANDSLIDE" },
        { label: "洪涝", value: "FLOOD" },
        { label: "火灾", value: "FIRE" },
        { label: "安全生产", value: "SAFE_PRODUCTION" },
        { label: "台风", value: "TYPHOON" },
        // { label: "干旱", value: "DROUGHT" },
        // { label: "冰凌", value: "ICE_CREAM" },
        { label: "森林草原火灾", value: "FOREST_STEPPE_FIRE" },
        { label: "其他", value: "OTHER" },
      ],
      eventNameList: [],

      //qcReportModal: false,
      isRun: true,
      fields,
      showPop: false,
      pauseShow: false,
      restoreShow: false,
      restartShow: false,
      retryShow: false,
      stopShow: false,
      delShow: false,
      clickId: "",
      loading: true,
      currentPage: 1,
      pages: 0,
      total: 0,
      allNum: 0,
      pageSize: 15,
      //priority: "",
      taskStatus: 1,
      searchName: "",
      groupName: "",
      changestatus: false,
      data: [],
      startDate: "",
      endDate: "",
      startTimeOption: {},
      endTimeOption: {},
      //children: [],
      // condtionList: {
      //   pageNum: "",
      //   pageSize: "",
      //   status: "",
      //   priorityLevel: "",
      //   startTime: "",
      //   endTime: "",
      // },
      selecttimestart: "",
      selecttimeend: "",
      //prioShow: false, // 修改优先级弹窗
      addTask: false,
      priorityData: {
        priority: "0",
        startWorkflowId: "",
      },
      EmergencyTaskParam: {
        createTime: "",
        address: "",
        DisasterType: "",
        EmergencyTaskName: "",
        ProductType: "",
      },
      options: [],
      DisasterTypeShowList: [],
      currentDisasterType: "洪涝",
      DisasterAreaRadio: true,
      CropDamageRadio: true,
      HouseDamageRadio: true,
      RoadDamageRadio: true,
      disasterName: "",
      disasterId: 1,
      regionName: "",
      regionCode: "",
    };
  },

  watch: {
    eventType: {
      handler(val) {
        if (["DROUGHT", "ICE_CREAM"].indexOf(val) > -1) {
          this.typeText = "风险";
        } else {
          this.typeText = "事件";
        }
        // this.productTypeValue = "";
        // this.publish();
      },
    },

    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    groupName(newVal, oldVal) {
      if (newVal.length >= 50) {
        this.$Message.error("任务名称长度不得超过50个字符");
      } else {
      }
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getTaskTableData();
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getTaskTableData();
    },
    startDate(newVal, oldVal) {
      this.startDate = this.$moment(newVal).format("YYYY-MM-DD");
    },
    endDate(newVal, oldVal) {
      this.endDate = this.$moment(newVal).format("YYYY-MM-DD");
    },
  },
  mounted() {
    // 查询子任务页面返回调用
    if (this.$route.query.from === "taskChildren") {
      this.currentPage = parseInt(this.$route.query.pageNum);
      // this.search();
    }
    if (this.$route.query.from === "adminHome") {
      // 调用父组件的方法
      this.$parent.$parent.headershowTask();
    }
    this.getTaskTableData();
    this.onStartTimeChange(this.startTime);
    this.onEndTimeChange(this.endTime);
  },
  methods: {
    publishSetting(item) {
      this.publishShow = true;
      this.taskID = item.id;
      this.currentItem = item;
      this.disasterList.forEach((ele) => {
        if (ele.label === item.disasterName) this.eventType = ele.value;
      });
      this.getEventName();
    },

    // 自动发布
    publishBtn(status, item) {
      this.taskID = item.id;
      this.currentItem = item;
      this.publish(status);
    },
    // 取消自动发布
    // unPublishBtn(item){
    //    this.taskID=item.id;
    //    this.currentItem=item;
    //    this.publish('unPublish',false)
    // },

    publish(isPublish) {
      let item = this.currentItem;
      if (!item.eventParam) {
        this.$Message.warning("请先设置发布参数！");
        this.$nextTick(() => {
          this.$set(this.currentItem, "publishStatus", !isPublish);
        });
        return;
      }
      if (item.eventParam && !item.eventParam["eventId"]) {
        this.$Message.warning(
          "没有找到要自动发布的事件，可以在发布设置中下选择事件"
        );
        this.$nextTick(() => {
          this.$set(this.currentItem, "publishStatus", !isPublish);
        });
        return;
      }

      let param = {
        // disasterName: item.disasterName,
        // disasterId: item.disasterId,
        id: item.id,
        eventId: item.eventParam["eventId"],
        isAuto: isPublish,
      };
      let param1 = { ...param, ...item };
      let path = this.$api.taskManageApi.disasterTaskUpdate;
      this.http.post(path, param1).then((res) => {
        if (res.data.code == 200) {
          this.$Message.success("执行成功");
          this.getTaskTableData();
        } else {
          this.$nextTick(() => {
            this.$set(this.currentItem, "publishStatus", !isPublish);
          });
          this.$Message.error("执行失败");
        }
      });
    },

    // 创建对应事件-----参数设置界面
    createEventBtn() {
      let param = this.currentItem;
      let path = this.$api.taskManageApi.disasterTaskCreateEvent;
      this.http.post(path, param).then((res) => {
        if (res.data.code == 200) {
          this.$Message.success("事件创建成功");
          this.eventId = res.data.data.disasterEventId;
          this.eventName = res.data.data.eventTitle;
          
          this.eventDate = "";
          this.eventTitle = "";
          this.eventArea = "";
        } else {
          this.$Message.error("事件创建失败");
        }
      });
    },
    // 保存发布参数
    savePublish() {
      // 任务状态 running-运行中 pause-暂停 complete-完成
      if (!this.eventId) {
        this.$Message.info("请先选择事件名称");
        return;
      }

      let item = this.currentItem;
      let paramsetting = {
        eventId: this.eventId, //必须
        eventName: this.eventName, //必须
        taskId: this.taskID, //必须

        eventDate: this.eventDate,
        eventTitle: this.eventTitle,
        eventArea: this.eventArea,
      };

      let path = this.$api.taskManageApi.disasterTaskUpdate;
      let param = {
        regionName: item.regionName,
        disasterName: item.disasterName,
        name: item.groupTaskName,
        disasterId: item.disasterId,
        regionCode: item.regionCode,
        occurTime: item.occurTime,
        id: item.id,
        eventParam: paramsetting,
        // isAuto:false,  是否自动发布
      };

      this.http.post(path, param).then((res) => {
        if (res.data.code == 200) {
          this.cancelSave();
          this.$Message.success("保存成功");
          // this.isRun = taskStatus === "running" ? false : true;
          this.getTaskTableData();
        } else {
          this.$Message.error("保存失败");
        }
      });
    },

    cancelSave() {
      this.publishShow = false;
      // this.eventType = "FOREST_STEPPE_FIRE";
      this.eventId = "";
      this.eventDate = "";
      this.eventTitle = "";
      this.eventArea = "";
    },

    getEventName(val) {
      // console.log('eventDate',this.$moment(this.eventDate).format("YYYY-MM-DD"))
      if (!this.eventType && val !== "eventType") {
        this.$Message.info("灾害类型为必选项，请先选择灾害类型");
        return;
      }
      let params = {
        eventType: this.eventType,
        eventTitle: this.eventTitle,
        startDate: this.eventDate
          ? this.$moment(this.eventDate).format("YYYY-MM-DD")
          : "",
        endDate: this.eventDate
          ? this.$moment(this.eventDate).format("YYYY-MM-DD")
          : "",
        provinceId: this.eventArea[0] ? this.eventArea[0] + "0000" : "",
        cityId: this.eventArea[1] ? this.eventArea[1] + "00" : "",
        countyId: this.eventArea[2] ? this.eventArea[2] : "",
      };
      let path = this.$api.emergencyMonitorApi.getEventName;
      this.eventNameList = [];
      this.http.get(path, params).then((res) => {
        console.log("res.data", res.data);
        if (res.data.success) {
          let result = res.data.data;
          this.eventTypeResult = result;
          result.forEach((item) => {
            let obj = {
              label: item.eventTitle,
              value: item.disasterEventId,
            };
            if (!(item.eventTitle.indexOf("日-") > -1)) {
              obj.label =
                item.eventTime.split("-")[0] +
                "年" +
                item.eventTime.split("-")[1] +
                "月" +
                item.eventTime.split("-")[2] +
                "日" +
                item.eventTitle;
            }
            this.eventNameList.push(obj);
          });
        }
      });
    },

    getEventId(val) {
      let temp = this.eventNameList.find((item) => {
        return item.value === val;
      });
      this.eventId = temp.value;
      this.eventName = temp.label;
    },

    lazyLoad(node, resolve) {
      let self = this;
      if (!node) {
        return false;
      }
      const { level } = node;
      if (level === 0) {
        let path = this.$api.queryDealApi.regionQueryProvince;
        let param = {};
        self.http.get(path, param).then((res) => {
          resolve(
            res.data.data.map((val) => {
              return {
                value: val.code,
                label: val.name,
                leaf: val.code == 72,
              };
            })
          );
        });
      } else if (level === 1) {
        let path =
          this.$api.queryDealApi.regionQueryCityByProvince + node.value;
        self.http.get(path).then((res) => {
          resolve(
            res.data.data.map((val) => {
              return {
                value: val.code,
                label: val.name,
                leaf: val.code == 8101 || val.code == 8201,
              };
            })
          );
        });
      } else if (level === 2) {
        let path =
          this.$api.queryDealApi.regionQueryAreaByCityCode + node.value;
        self.http.get(path).then((res) => {
          resolve(
            res.data.data.map((val) => {
              return {
                value: val.code,
                label: val.name,
                leaf: true,
              };
            })
          );
        });
      }
    },

    statusBtn(item, taskStatus) {
      let path = this.$api.taskManageApi.disasterTaskUpdate;
      let param = {
        status: taskStatus,
        regionName: item.regionName,
        disasterName: item.disasterName,
        name: item.groupTaskName,
        disasterId: item.disasterId,
        regionCode: item.regionCode,
        occurTime: item.occurTime,
        id: item.id,
      };
      this.http.post(path, param).then((res) => {
        if (res.data.code == 200) {
          this.$Message.success("操作成功");
          this.isRun = taskStatus === "running" ? false : true;
          this.getTaskTableData();
        } else {
          this.$Message.error("操作失败");
        }
      });
    },
    qcReportModalClosed() {
      this.qcReportModal = false;
    },
    getTaskDetails(item) {
      this.$router.push({
        // path: "/taskManage/BuildEmergencyTask",
        path: "/emergencyMonitor",
        query: {
          //from: "taskLook",
          id: item.id,
          status: item.status,
        },
      });
      $(".sidebar-show").hide();
    },

    //新建应急任务
    addEmergencyTask() {
      let self = this;
      self.EmergencyTaskParam = {
        createTime: "",
        address: "",
        DisasterType: "",
        EmergencyTaskName: "",
        ProductType: "",
      };
      //self.currentDisasterType="洪涝";

      this.addTask = true;
      this.searchprovince();
      this.selectDisaster();
    },
    addTaskCancel() {
      this.addTask = false;
    },

    addTaskOk() {
      //debugger;
      let name = this.EmergencyTaskParam.EmergencyTaskName;

      // 时间转换
      //let createTime=this.$moment(this.EmergencyTaskParam.createTime).format("YYYY-MM-DD hh:mm:ss")
      let createTime = this.$moment(this.EmergencyTaskParam.createTime).format(
        "YYYY-MM-DD"
      );
      let submitPath = this.$api.taskManageApi.disasterTaskSave;
      let disasterName = this.disasterName;
      let params = {
        disasterId: this.disasterId,
        name: name,
        regionCode: this.regionCode,
        regionName: this.EmergencyTaskParam.address,
        disasterName: disasterName,
        occurTime: createTime,
      };

      console.log("任务创建提交参数", params);
      this.http.post(submitPath, params).then((res) => {
        if (res.data.success) {
          this.$Message.success("提交任务成功");
          this.showCreateTaskModal = false;
          this.getTaskTableData();
        } else {
          this.$Message.error("提交失败:" + res.data.message);
        }
      });

      this.addTask = false;
    },

    //选择灾种
    selectDisaster() {
      let self = this;
      let path = this.$api.taskManageApi.disasterTypeAll;
      let param = {};
      self.http.get(path, param).then((res) => {
        //debugger;
        if (res.data.code == 200) {
          let disasterType = res.data.data;
          self.DisasterTypeShowList = [];
          for (let i = 0; i < disasterType.length; i++) {
            let obj = {};
            obj["name"] = disasterType[i].name;
            obj["id"] = disasterType[i].id;
            let tempdata1 = {
              value: obj,
              label: disasterType[i].name,
            };
            self.DisasterTypeShowList.push(tempdata1);
          }
          this.EmergencyTaskParam.DisasterType = disasterType[0].name;
          this.disasterName = disasterType[0].name;
        }
      });
    },
    // 选择  省份的坐标
    searchprovince() {
      //debugger;
      let self = this;
      let path = this.$api.taskManageApi.regionQueryProvince;
      let param = {};
      self.http.get(path, param).then((res) => {
        //debugger;
        if (res.data.code == 200) {
          let province = res.data.data;
          self.options = [];
          for (let i = 0; i < province.length; i++) {
            let obj = {};
            obj["name"] = province[i].name;
            obj["code"] = province[i].code;
            //obj["bounds"] = province[i].properties.bounds;
            //obj["tag"] = "province";
            let tempdata = {
              value: obj,
              label: province[i].name,
            };
            self.options.push(tempdata);
          }
          let other = {
            value: {},
            label: "其他",
          };
          other.value.code = "";
          other.value.name = "其他";
          self.options.push(other);
          console.log(self.options);
        }
      });
    },

    handleChangeProvince(item) {
      let ProvinceName = item[0].name;
      this.EmergencyTaskParam.address = item[0].name;
      this.regionCode = item[0].code;
      let createTime = this.$moment(this.EmergencyTaskParam.createTime).format(
        "YYYY-MM-DD"
      );
      this.EmergencyTaskParam.EmergencyTaskName =
        createTime +
        "-" +
        ProvinceName +
        "-" +
        this.EmergencyTaskParam.DisasterType;
    },

    selectDisasterType(event) {
      this.disasterId = event.target.options.selectedIndex + 1;
      let selectIndex = this.disasterId - 1;
      this.EmergencyTaskParam.disasterType = event.target[selectIndex].label;
      this.disasterName = event.target[selectIndex].label;
      let createTime = this.$moment(this.EmergencyTaskParam.createTime).format(
        "YYYY-MM-DD"
      );
      this.EmergencyTaskParam.EmergencyTaskName =
        createTime +
        "-" +
        this.EmergencyTaskParam.address +
        "-" +
        this.EmergencyTaskParam.disasterType;
    },

    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
    },
    clearmess() {
      this.groupName = "";
      this.startDate = "";
      this.endDate = "";
      this.priority = "";
      //this.taskStatus = "";
      this.currentPage = 1;
      this.getTaskTableData();
    },
    // 输入框判断 start
    onStartTimeChange(startTime, type) {
      this.endTimeOption = {
        disabledDate(endTime) {
          return (
            endTime < new Date(startTime) - 8 * 60 * 60 * 1000 ||
            endTime > Date.now()
          );
        },
      };
    },
    onEndTimeChange(endTime, type) {
      this.startTimeOption = {
        disabledDate(startTime) {
          return startTime >= new Date(endTime) || startTime >= Date.now();
        },
      };
    },
    // end
    // getInfo(val) {
    //   let userLink =
    //     `/taskManage/allTask/${val.id}/${val.groupTaskName}` + "?" + val.number;
    //   this.$router.push({
    //     path: userLink,
    //     query: {
    //       pageNum: this.currentPage,
    //       from: "taskLook",
    //       taskType: val.taskType,
    //     },
    //   });
    // },
    delCancel() {
      this.delShow = false;
    },
    del(val) {
      this.delShow = true;
      this.clickId = val.id;
      //debugger;
    },
    delOk() {
      let self = this;
      this.delShow = false;
      let path = this.$api.taskManageApi.disasterTaskDelete + this.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.code == 200) {
          this.$Message.success("删除成功");
          this.getTaskTableData();
        } else {
          this.$Message.error("删除失败");
        }
      });
    },
    // pause(val) {
    //   this.pauseShow = true;
    //   this.clickId = val.id;
    // },

    // restore(val) {
    //   this.restoreShow = true;
    //   this.clickId = val.id;
    // },
    // retry(val) {
    //   this.retryShow = true;
    //   this.clickId = val.id;
    // },

    // 终止任务
    stop(item) {
      let path = this.$api.taskManageApi.disasterTaskUpdate;
      // let taskStatus = "complete";
      // if (item.status != 1) {
      //   taskStatus = "running";
      // }
      let param = {
        status: "complete", //taskStatus,
        regionName: item.regionName,
        disasterName: item.disasterName,
        name: item.groupTaskName,
        disasterId: item.disasterId,
        regionCode: item.regionCode,
        occurTime: item.occurTime,
        id: item.id,
      };
      this.http.post(path, param).then((res) => {
        if (res.data.code == 200) {
          this.$Message.success("已完成");
          this.getTaskTableData();
        } else {
          this.$Message.error("停止失败");
        }
      });
    },

    //查询所有流程
    getTaskTableData(data) {
      let self = this;
      if (data == "look") {
        self.currentPage = 1;
      }
      self.data = [];
      let pageSize = this.pageSize;

      if (self.endDate == "Invalid date") {
        self.endDate = "";
      }
      if (self.startDate == "Invalid date") {
        self.startDate = "";
      }
      let path = this.$api.taskManageApi.disasterTaskQueryAll;
      let param = {
        pageNum: self.currentPage,
        pageSize: this.pageSize,
        //status: self.taskStatus,

        //priority: self.priority,
        startTime: self.startDate,
        endTime: self.endDate,
        name: self.groupName,
        //_loadingContainer: document.querySelector(".c-main"),
      };
      console.log(param, "查询参数");
      this.http.get(path, param).then((res) => {
        if (res.data.code == 200) {
          //debugger;
          this.showPop = false;
          let resData = res.data.data;
          let dataa = [];
          let taskListInfo = [];
          //let status1 = 2;
          for (let i = 0; i < resData.length; i++) {
            // 截取掉时间2
            taskListInfo = resData[i].taskInfoList;
            let processedImages = "0";
            let imageNumberAll = 0;
            let imageSuccessNum = 0;
            let imageNoProcess = 0;
            if (taskListInfo.length > 0) {
              for (let j = 0; j < taskListInfo.length; j++) {
                let taskInfo = taskListInfo[j];
                imageNumberAll += taskInfo.imageNumber;
                imageSuccessNum += taskInfo.successNumber;
              }
              imageNoProcess += imageNumberAll - imageSuccessNum;
            }
            processedImages =
              imageNumberAll +
              "(" +
              imageSuccessNum +
              "/" +
              imageNoProcess +
              ")";

            // // 运行状态
            // if (resData[i].status == "running") {
            //   this.taskStatus = 1;
            // } else {
            //   this.taskStatus = 0;
            // }
            dataa.push({
              createTime: resData[i].createTime,
              endTime: resData[i].updateTime,
              id: resData[i].id,
              imageNumber: processedImages,
              taskListInfo: resData[i].taskListInfo,

              status: resData[i].status, //this.taskStatus,
              regionName: resData[i].regionName,
              disasterName: resData[i].disasterName,
              groupTaskName: resData[i].name,
              disasterId: resData[i].disasterId,
              regionCode: resData[i].regionCode,
              occurTime: resData[i].occurTime,
              publishStatus: resData[i].isAuto,
            });
          }
          //TODO：LSW

          self.data = dataa;

          self.allNum = res.data.data.length;
          self.total = Math.ceil(res.data.total / self.pageSize);
          for (let i = 0; i < self.data.length; i++) {
            self.data[i].number =
              (self.currentPage - 1) * this.pageSize + i + 1;
            if (self.data[i].endTime == null) {
              self.data[i].endTime = "";
            }
          }
        } else {
          this.showPop = false;
          this.$Message.error("查询失败");
        }
      });
    },
  },
  components: {
    QualityReport,
  },
};
$("#inputenter").keydown(function (e) {
  if (e.keyCode == 13) {
    this.hello();
  }
});
</script>
<style scoped>
.myCol {
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.myColPri {
  margin-right: 10px;
}
.myCol1 {
  margin-left: 0px;
}
.myColtemp {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 5px;
  width: 33.3%;
}
.search {
  display: flex;
}
.styImg {
  margin-left: 70px;
}
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.76563rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  width: 50px;
}

.labelName {
  margin-right: 25px;
  margin-bottom: 0px;
}
.m_radio_group {
  height: 21px;
  margin-top: -9px;
}
.m_radio_group label {
  margin: 0;
  margin-right: 14px;
}
.btnStyle {
  padding: 0;
  margin: 0 3px;
}
.btnStyle:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.strongstyle {
  font-size: 18px;
}

.pickstyle {
  width: 58%;
}
.btn-info:hover {
  color: #fff;
  background-color: rgb(105, 140, 247);
  border-color: rgb(78, 105, 189);
}
.clean {
  margin-left: 10px;
  margin-right: 18px;
}
.listbtn {
  margin-left: 0px;
}
.deletestyle {
  width: 15px;
  height: 15px;
}
.page-link {
  cursor: pointer;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.modal-header {
  display: flex;
  justify-content: flex-start;
}
.delKuangShow {
  line-height: 30px;
  margin-left: 10px;
  font-size: 16px;
}
.delKuangBody {
  margin-left: 39px;
  line-height: 3;
}
.delAnniu {
  background-color: gray !important;
  border-color: gray !important;
}
.delAnniu:hover {
  background-color: rgb(187, 177, 177) !important;
  border-color: gray !important;
}
.endDateBtn,
.startStutes {
  margin-bottom: 20px;
}
.startStutes {
  position: relative;
  left: -3%;
}
.endDateBtn {
  margin-right: -2%;
  position: relative;
  left: -10%;
}
.threePart,
.secondPart {
  display: flex;
  justify-content: space-between;
}
/* xyz */
/* .secondPart {
  margin-top: 16px;
} */
.layout {
  width: 25%;
}
/* .searchRight {
  position:relative;
  left:90%;
  width: 18%;
  margin-top: -10px;
} */
.searchRight > .btnstyle1 {
  position: absolute;
  right: 2%;
}
/* 用以调整表格位置 */
.tablePosition {
  overflow-y: auto;
  height: calc(100% - 158px);
}

/* xyz */
.card-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 70px 20px 18px 20px;
  position: absolute !important;
  top: 0 !important;
  width: 100%;
  height: 100% !important;
}
.rowstyle {
  margin-bottom: 0;
}
</style>

<style>
.tablePosition > div {
  height: 100% !important;
  width: 100% !important;
  border: 1px solid #d8dbe0;
  border-left: 0;
  border-right: 0;
}

.table {
  margin-bottom: 0;
}

.table th {
  border-top: 0;
}
.delAnniu {
  background-color: gray !important;
  border-color: gray !important;
}
.delAnniu:hover {
  background-color: rgb(187, 177, 177) !important;
  border-color: gray !important;
}
.btn-info {
  color: #fff;
  background-color: #3c6ef0;
  border-color: #3c6ef0;
  height: 40px;
}

.btn-info:hover {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
  border-color: #698cf7;
}

.pubulishSetting {
  display: flex;
  /* // flex-direction: column; */
  flex-wrap: wrap;
  justify-content: center;
}

.queryBox {
  border: 2px solid #dcdee2;
  padding: 20px 10px 0px 10px;
  border-radius: 5px;
  margin-bottom: 30px;
}
</style>